<template>
  <a-spin :spinning="!show">
    <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
      <!-- S-查找条件 -->
      <!-- <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
          <a-row type="flex" :gutter="4">
            <a-col :span="12" :xs="24" :sm="9" :md="12" :lg="4">
              <a-form-item label="组织">
                <a-select v-model="form.orgId" placeholder="选择组织">
                  <a-select-option :value="item.orgId" v-for="(item) in [{orgId:'',orgName:'选择组织'},...orgList]"
                    :key="item.orgId">{{item.orgName}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12" :xs="24" :sm="9" :md="12" :lg="4">
              <a-form-item label="用户">
                <a-input v-model="form.name" placeholder="填写用户" />
              </a-form-item>
            </a-col>
            <a-col :span="6" :xs="24" :sm="6" :md="12" :lg="6" style="margin-top:6px;">
              <a-button type="primary" @click="fetchUserAllList()">查询</a-button>
              <a-button style="margin-left: 10px" @click="init()">重置</a-button>
              <a-button style="margin-left: 10px" @click="editOpen()">添加</a-button>
            </a-col>
  
          </a-row>
        </a-form> -->
      <!-- E-查找条件 -->
      <!-- S-表格 -->
      <a-table :columns="columns" :data-source="data" bordered :pagination="false">
        <template slot="action" slot-scope="record">
          <a-space>
            <a-button type="primary" ghost @click="editOpen(record)">编辑</a-button>
            <a-button danger @click="deleteTap(record?.userId)">删除</a-button>
            <a-button danger @click="passwordOpen(record)">密码</a-button>
          </a-space>
        </template>
      </a-table>
      <!-- E-表格 -->
    </div>
    <!-- S-编辑弹框 -->
    <edit-model ref="editRef" @ok="fetchUserList" :orgList="orgList" />
    <!-- E-编辑弹框 -->
    <!-- S-密码弹框 -->
    <password-model ref="passwordRef" @ok="fetchUserList" />
    <!-- E-密码弹框 -->
  </a-spin>
</template>

<script>
  import { mapState } from 'vuex'
  import { message } from 'ant-design-vue';
  import { getUserMyList, postUserDelete } from "@/services"
  import { getOrgList } from "@/services"
  import editModel from "./components/edit"
  import passwordModel from "./components/password"

  export default {
    components: {
      editModel,
      passwordModel,
    },
    name: 'User',
    data() {
      return {
        // 表单
        form: {
          name: '',
          orgId: '',
        },
        // 组织列表
        orgList: [],
        // 表格列表
        data: [],
        // 表格结构
        columns: [
          {
            title: '用户ID',
            dataIndex: 'userId',
            key: 'userId',
          },
          {
            title: '手机号',
            dataIndex: 'mobile',
            key: 'mobile',
          },
          {
            title: '组织ID',
            dataIndex: 'orgId',
            key: 'orgId',
          },
          {
            title: '组织名称',
            dataIndex: 'orgName',
            key: 'orgName',
          },
          {
            title: '用户名称',
            dataIndex: 'userName',
            key: 'userName',
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'action' },
          },
        ],
        // 渲染状态
        show: false,
      }
    },
    computed: {
      ...mapState('setting', ['pageMinHeight']),
    },
    async created() {
      // 获取组织列表
      await this.fetchOrgList()
      // 获取所有用户列表
      await this.fetchUserList()
    },
    methods: {
      /**
       * 打开密码弹框
       */
      passwordOpen(e) {
        this.$refs.passwordRef.open(e)
      },
      /**
       * 删除 
       */
      deleteTap(id) {
        let t = this
        this.$confirm({
          title: '提示',
          content: '你确定要删除吗?',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          async onOk() {
            t.show = false
            let res = await postUserDelete({
              userId: id,
              operator: '',
            })
            t.show = true
            if (res.code == 200) {
              message.success(res.msg)
              t.fetchList()
            } else {
              message.error(res.msg)

            }
          },
        });
      },
      /**
       * 打开弹框
       */
      editOpen(e) {
        this.$refs.editRef.open(e)
      },
      /**
       * 初始表格
       */
      async init() {
        // 初始化
        this.form = this.$options.data().form
        // 获取所有用户列表
        await this.fetchUserList()
      },
      /**
       * 获取所有用户列表
       */
      async fetchUserList() {
        this.show = false
        let { code, data } = await getUserMyList(this.form)
        this.show = true
        if (code == 200) {
          this.data = data
        }
      },
      /**
       * 获取组织列表 
       */
      async fetchOrgList() {
        let { code, data } = await getOrgList({})
        if (code == 200) {
          this.orgList = data
        }
      },
    },
  }
</script>

<style scoped lang="less">
</style>